import { useEffect } from 'react';
import { useReducer, store, updateTool } from '@/components';
import styles from './index.module.less';
const App = (props) => {
  const [state, setState] = useReducer({
    checkKey: 1,
  });
  const data = [
    {
      label: '基本信息',
      show: true,
      sort: 1,
      key: 'basicInformation',
    },
    {
      label: '教育背景',
      show: true,
      sort: 2,
      key: 'education',
    },
    {
      label: '工作经验',
      show: true,
      sort: 3,
      key: '3',
    },
    {
      label: '测试模块102444',
      show: true,
      sort: 4,
      key: '4',
    },
  ];
  useEffect(() => {
    store.dispatch('TABSTATE', data[0]);
    const timer = setTimeout(() => {
      updateTool.updated('home');
      clearTimeout(timer);
    }, 100);
  }, []);
  return (
    <div className={styles.peripheral}>
      {data
        .filter((ele) => ele.show)
        .sort((a, b) => a.sort - b.sort)
        .map((ele) => {
          return (
            <section
              className={styles.item}
              key={ele.key}
              style={{ color: ele.key == state.checkKey ? '#f60' : '' }}
              onClick={() => {
                setState({ checkKey: ele.key });
                store.dispatch('TABSTATE', ele);
                updateTool.updated();
              }}
            >
              {ele.label}
            </section>
          );
        })}
    </div>
  );
};
export default App;
